<script setup>
import { tool } from "../../tool/index"
import { onMounted, ref } from "vue"
import { ElMessage } from 'element-plus'

const imageUrl = tool.serverPath + "api/app_api/image/download?fileName="
const carousel = ref()
const articles = ref()
const ifBlog = ref(false) 
const blogs = ref()
const limit = ref(4)
const offset = ref(1)
const blog_search = ref()
const carouse_id = ref()
const carouse_blog = ref({
  title:null,
  content:null,
  image:null
})
const carouse_blog_id = ref()
async function getCarouse() {
  try {
    const data = {
      key: "Search",
      data: {
        key: "",
        value: ""
      }
    }
    const response = await tool.axiosApi("carousel", data, "get")
    carousel.value = response.data
    articles.value = response.data.map(async data => {
      const articles = {
        key: "Search",
        columns: ["title", "content", "image"],
        data: {
          key: ["id"],
          value: [`${data.blog_id}`]
        }
      }
      const article = await tool.axiosApi("article", articles, "get")
      return article.data[0]
    })
  } catch (error) {

  }
}
async function getBlog(value) {
  try {
    const data = {
      key: "Search",
      limit: limit.value,
      offset: offset.value,
      columns: ["title", "content", "author_id","id","image"],
      data: {
        OpLike:"true",
        key: ["id","title"],
        value: value ?  [`${value}`]:[``],
        Or:"true"
      }
    }
    const response = await tool.axiosApi("article", data, "get")
    for (let index = 0; index < response.data.length; index++) {
      response.data[index].content = response.data[index].content.slice(0,100) + "....."
      const date = {
      key: "Search",
      columns: ["nickname"],
      data: {
        key: ["id"],
        value: [`${response.data[index].author_id}`]
      }
    }
      const name = await tool.axiosApi("user",date,"get")
      response.data[index].author_id = name.data[0].nickname
    }
    return response
  } catch (error) {

  }
}
async function getBlog_one(value){
  const data = {
      key: "Search",
      columns: ["title", "content","id","image"],
      data: {
        key: ["id"],
        value: [value]
      }
    }
    const response = await tool.axiosApi("article",data,"get")
    if(response.count){
    response.data[0].title = response.data[0].content.slice(0,30)
    response.data[0].content = response.data[0].content.slice(0,260).replace(/[\r\n]+/gm, '');
    ifBlog.value = true
    return response
    }
    return null
    
}
async function set_carouse_id(blog_id,carouse){
  await set_carouse_blog(blog_id)
  carouse_id.value = carouse
}
async function set_carouse_blog(value){
  carouse_blog_id.value = value
  const  data  = await getBlog_one(value)
  if(!ifBlog.value){
    ElMessage({
      type:"danger",
      message:"该文章不存在，请重新设置轮播图"
    })
  }
  if(data!=null){
    carouse_blog.value = data.data[0]
  }
  dialogVisible.value = true

}
async function searchBlog(){
  blogs.value =await getBlog(blog_search.value)
}
async function handlePageChange(value){
  offset.value = value
  await searchBlog()
}
async function set_carouse(){
  const data = {
      key: "update",
      data: {
        key: ["title","description","blog_id","image"],
        value: [carouse_blog.value.title,carouse_blog.value.content,carouse_blog_id.value,carouse_blog.value.image]
      },
      where:{
        key:["id"],
        value:[carouse_id.value]
      }
    }
  const response = await tool.axiosApi("carousel",data,"post")
  if(response.message){
    ElMessage({
      type:"success",
      message:"修改成功 "
    })
    dialogVisible.value = false
    location.reload()
  }else{
    ElMessage({
      type:"danger",
      message:"修改失败 "
    })
  }
}
onMounted(async () => {
  await getCarouse()
  blogs.value = await getBlog()
})
const dialogVisible = ref()
</script>

<template>
  <div class="carouse_body">
    <el-row justify="center">
      <el-col class="carouse_item marginTop10" v-for="item in carousel" :span="7">
        <el-image fit="cover" class="item_image radius5" :src="imageUrl + item.image" />
        <div>
          <el-text class="item_title" truncated >{{item.title}}</el-text>
        </div>
        <div class="item_content" >
          {{ item.description }}
        </div>
        <el-button @click="set_carouse_id(item.blog_id,item.id)" style="width: 100%;" type="primary " size="medium "> 修改 </el-button>
      </el-col>
    </el-row>
  </div>
  <!-- 弹出层 -->
  <el-dialog class="dialog" top="20px" lock-scroll="true" :show-close="false" v-model="dialogVisible" title="修改轮播图" width="70%">
    <div class="carouse_dialog ">
      <el-container>
        <el-aside class="aside marginTop10 ">
          <el-row class="marginLeft10">
            <el-col :span="15">
              <el-input type="text" class="Search_blog" v-model="blog_search" placeholder="搜索文章" />
            </el-col>
            <el-col :span="8">
              <el-button type="primary " @click="searchBlog()" >搜索</el-button>
            </el-col>
          </el-row>
          <div>
          <el-row @click="set_carouse_blog(item.id)" v-for="item in blogs.data" class="blogs_item marginLeft10">
            <el-col :span="8" >
              <el-image  fit="cover " class="blogs_image radius5" :src="imageUrl + item.image" />
            </el-col>
            <el-col :span="14">
              <div class="blog_title" ><el-text truncated> {{ item.title }} </el-text></div>
              <div><el-text class="blog_content" line-clamp="2">{{ item.content }}</el-text></div>
              <div class="blog_author" > 作者:  {{ item.author_id }}</div>
            </el-col>
          </el-row>
          <el-pagination @current-change="handlePageChange" layout="prev, pager, next" :page-size="limit" :total="blogs.count" />
        </div>
        </el-aside>
        <el-main class=" marginTop10">
          <el-image fit="cover" class="carouse_blog_image radius5" :src="imageUrl + carouse_blog.image" />
          <div>
            <el-input v-model="carouse_blog.title" placeholder="请输入标题" show-word-limit="true" maxlength="30" />
          </div>
          <el-input show-word-limit="true" maxlength="260" resize="none" v-model="carouse_blog.content"
            :autosize="{ minRows: 10, maxRows: 10 }" type="textarea" placeholder="请输入介绍" />
        </el-main>
      </el-container>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary " @click="set_carouse_blog(carouse_blog_id)">使用文章数据</el-button>
        <el-button type="success " @click="set_carouse()">
          确认修改
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
.marginTop10>*:not(:first-child) {
  margin-top: 10px;
}

.marginLeft10>*:not(:first-child) {
  margin-left: 10px;
}

.radius5 {
  border-radius: 5px;
}

.carouse_body {}

.carouse_body .carouse_item {
  box-shadow: 1px 1px 20px rgba(66, 66, 66, 0.178);
  border: 10px white solid;
  overflow: hidden;
  border-radius: 10px;
  height: auto;
  margin-left: 30px;
  padding: 10px;
}

.carouse_body .carouse_item .item_image {
  width: 100%;
  height:150px;
}

.carouse_body .carouse_item .item_title {
  border-bottom: 2px #409EFF solid;
  padding-bottom: 5px;
  font-weight: 700;
  font-size: 20px;
}

.carouse_body .carouse_item .item_content {
  font-size: 16px;
  height: 300px;
  color: rgb(116, 116, 116);
}

.aside{
  padding-left: 15px;
  padding-right: 15px;
  width: 500px;
}
.blogs_item{
  transition: 0.1s;
  border-radius: 5px;
}
.blogs_item>*{
  padding: 10px;
  margin-top: 5px;
}
.blogs_item:hover{
  box-shadow: 1px 1px 10px rgba(111, 111, 111, 0.44);
}
.blogs_item .blog_content{
  font-size: 13px;
  color: rgb(139, 139, 139);
}
.blogs_item .blog_author{
  font-size: 12px;
  color: #1f476f8d;
}
.blogs_item .blogs_image{
  width: 100%;
  height: 80px;
}
.carouse_blog_image{
  width: 100%;
  height: 200px;
}
</style>